<template>
  <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
  <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
  <div>
  <el-dialog :visible.sync="detailVisible" width="70%" >
    <el-link @click="allRead()">一键已读<i class="el-icon-view el-icon--right" ></i> </el-link>
    <el-tabs icon="el-icon-message-solid">
      <el-table :data="this.getMessageData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
<!--        <el-table-column prop="id" label="ID" width="80"></el-table-column>-->
        <el-table-column prop="title" label="标题" width="140"></el-table-column>
        <el-table-column prop="content" label="内容" ></el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-success" size="mini" circle @click="UpIsRead(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>
  </el-dialog>

  </div>

</template>

<script>



import { mapGetters } from "vuex";
import Cookies from "js-cookie";
import { allRead ,updateIsRead} from '@/api/message'
import  {selectNotReadMessage} from '@/api/message'
export default {
  props:{
    messageList:[]
  },
  name: "dialogComponent",
  data(){
    return{
      detailVisible:false,
      addVisible:false,
      user:JSON.parse(Cookies.get("JavaInfo")),
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      TMessageVo:{},
      messageNum:0,


    }
  },
  computed: {
    ...mapGetters(["getMessageData"]),
  },
  methods:{
    //3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
    init(data){
      this.detailVisible=true;
      //data是父组件弹窗传递过来的值，我们可以打印看看
      console.log(data);
    },
    addMessage(){
      this.addVisible=true;
      this.detailVisible=false;
    },
    getData(){
      this.TMessageVo.receiverId=this.user.id
      selectNotReadMessage(this.TMessageVo)
        .then(response => {
          this.messageNum=response.length
          this.messageData=response
          console.log(this.messageList)
          this.$store.dispatch('message/asyncUpdateMessage',response)
        })
    },
    UpIsRead(e){
      updateIsRead(e)
        .then(response =>{
          this.getData()
          this.$message.success('操作成功')
        })
    },
    allRead(){
      this.TMessageVo.receiverId=this.user.id
      allRead(this.TMessageVo)
        .then(response => {
        this.getData()
      })
    }
  },
  mounted() {

  },

}
</script>
